<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="{% static 'image/favicon2.ico' %}" type="image/x-icon"/>
    
    <title>{% block title %}{% endblock %}- 草莓君的妙妙屋</title>

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/adjust.css">
    <link rel="stylesheet" href="css/nav.css">
    <style>

    </style>
</head>
<body>
<!-- {% include "common/header.html" %} -->

<div class="container content">
    <div class="row text-center">
        <div class="col-sm-12">
            <form action="http://www.baidu.com/baidu" target="_blank" class="form-inline" role="form">
                <div class="input-group">
                    <input type="text" name="word" class="form-control" id="name" placeholder="百度搜索"
                           autocomplete="off">
                    <span class="input-group-btn"><button type="submit" class="btn btn-default">提交</button>
                    </span>
                </div>
            </form>
            <div class="mdblock"></div>
        </div>
    </div>

    <div id='navigation'>
        <div v-if="is_authenticated" class="col-sm-12 text-center whitergba">
            <h1>妙妙屋提供自定义网址导航功能</h1>
            <p>支持网址分类功能，清晰明了地将网址装进相应的盒子里！</p>
            <p>自定义的网址记录会和账号相关联, 随时随地仅需登录就可访问！</p>
            <p>体验具体功能请您先进行<a href="{% url 'account:user_login' %}">登录</a></p>
        </div>
        
        <!-- <div class="grid">
            {% for LB in LBlist %}
                <div class="grid-sizer"></div>
                <div class="grid-item grid-item--width2 ">
                    <div class="panel panel-default" style="margin-bottom: 0px">
                        <div class="panel-heading">
                            <h3 class="panel-title">{{ LB.boxname }}</h3>
                        </div>
                        <div>
                            {% for sitename,url in LB.str2dict.items %}
                                <div class="btn btn-link">
                                    <a href="{{ url }}" target="_blank">{{ sitename }}</a>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="col-md-12 text-center whitergba">
                    <h1>您还没有设置网址导航</h1>
                    <p>点击右上角用户名，打开 用户后台 进行设置</p>
                </div>
            {% endfor %}
        </div> -->
</div>

</div>

<!-- {% include "common/footer.html" %} -->

<script>

</script>


<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script>
    $('.grid').masonry({
        // set itemSelector so .grid-sizer is not used in layout
        itemSelector: '.grid-item',
        // use element for option
        columnWidth: '.grid-sizer',
        percentPosition: true,
        gutter: 5,
    });
</script>
<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">
    const NavComponent = {
        data() {
            return {
                is_authenticated:true
            }
        }
    };
    const app = Vue.createApp(NavComponent);
    app.mount('#navigation');
</script>


</body>
</html>



